iT邦幫忙

DAY 19
6

30天掌握Sass語法系列 第 15

30天掌握Sass語法 - (19) Sass @Mixin and Compass結合運用範例

  • 分享至 

  • xImage
  •  

在之前我們都是在講關於Sass與Compass的語法教學,
這次我們來談談該如何使用Sass Mixin與Compass該如何結合,
才可以提升網頁設計師撰寫CSS碼的效率。

首先我們先來預設一個設計情境

設計目的:
要在一個DIV裡面載入完整背景圖片、
為了將其完整呈現,
我們同時必須將圖片的高度與寬度記錄下來,
讓他與背景圖案的高寬一致。
設計流程:
流程1.用編輯器寫到一半後,
到資料夾尋找檔案名稱,
並用大腦去暫時記憶他的「檔名」、「高度」、「寬度」
流程2:回到編輯器後一一撰寫時,
又突然忘記了寬度的像素,
於是又回到資料夾再確認一次圖片高度
流程3:回到編輯上再補上高度設定的CSS。

從上述的流程可以得知,
網頁設計師在去設定圖片的寬度和檔名時,
時常必須去透過短暫記憶來記東西,
但這動作做久以後,
大腦其實很容易就會因為過度記憶而感到勞累。

所以透過Compass的image-width()與image-height()的話,
就可以讓Compass自動算出圖片的寬高出來。

所以你就可以寫像這樣子:

//Sass語法
@import compass
.logo
  width: image-width('../images/logo.png')
  width: image-height('../images/logo.png')
  background: url(../images/logo.png)

編譯出來就會像這樣子:

.logo {
  width: 512px;
  width: 512px;
  background: url(../images/logo.png);
}

很神奇吧?
Compass自動會去幫你解讀圖片的寬度,
將你把像素帶進去,
但其實這樣子還是不夠的,
因為今天我要寫一個寬度時,
還必須寫他引入的image-width與路徑,
寫的程式碼還是很多,
不如還是照原來做法比較好。

但如果你把它用成@Mixin的話,
那就好用多了,
像下述寫法:

@mixin bg($img) 
  background: url("../images/#{$img}")
  width: image-width("../images/#{$img}")
  height: image-height("../images/#{$img}")
.logo
  +bg('logo.png')

如果你的變數帶進去,前後有程式碼時,
你可以用#{變數}的方式將值帶進去,
圖片路徑就看你的CSS與images圖片的資料夾對應位置就可找到,
透過這樣子的方式,
以後我只要記一個圖片名稱就好,
就不用一次記那麼多東西了,
是不是很方便呢^_^?

所以透過這樣的方式,
你也可以去尋找如何將Compass的語法進行運算,
來化解過於繁瑣的流程。

這裡也附上影片提供各位參考學習:
Yes


上一篇
30天掌握Sass語法 - (18)規劃你的Sass結構
下一篇
30天掌握Sass語法 - (20) 利用@Mixin與Sass運算建立Grid System
系列文
30天掌握Sass語法41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
Lucas
iT邦新手 5 級 ‧ 2023-08-02 21:20:33
<h1 class="logo">
    <a href="#">LOGO</a>
</h1>
@mixin bg($img){
    background: url("../images/#{$img}") no-repeat;
    width: image-width("../images/#{$img}");
    height: image-height("../images/#{$img}");
}

.logo a{
    @include bg('brand.png');
    display: block;
}

使用一樣的方式,但編譯出的結果沒有取到圖片的寬高

.logo a {
  background: url("../images/brand.png") no-repeat;
  width: image-width("../images/brand.png");
  height: image-height("../images/brand.png");
  display: block;
}/*# sourceMappingURL=all.css.map */

不知道問題出哪裡了,再麻煩各位路過的大神幫忙解答下,感謝

我要留言

立即登入留言